<script>
  import MorePlains from './MorePlains.vue'
  import plainScoreHead from './plainScoreHead.vue';
  import GoMyteamBtn from'./GoMyteamBtn.vue';
  import GoWhere from'./GoWhere.vue';
  import SaoMa from './SaoMa.vue';
  export default {
    data() {
      let currentPlainIndex=storage.get('currentPlainIndex');
      if(currentPlainIndex===null){
        currentPlainIndex=4;
        storage.set('currentPlainIndex',currentPlainIndex)
      }
      return {
        footerHidden: false,//底部扫码显示
        startX: "",
        startY: "",
        currentDb: 0,//都币
        finishedDb: "",//已消费多必
        currentPlainIndex: currentPlainIndex,//当前选择的哪种飞机
        plains: [
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001038.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012117.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001037.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012155.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001036.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012153.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001034.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012096.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001031.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012085.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001035.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012115.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001032.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012106.png')
          },
          {
            name: "",
            url1: require('../../../../static/staticS/images/chaofei/plains/SW001033.png'),
            url2: require('../../../../static/staticS/images/chaofei/plains2/SW012088.png')
          }
        ],//各种大飞机
      }
    },
    components: {
     MorePlains,plainScoreHead,GoMyteamBtn,GoWhere,SaoMa
    },
    computed: {
      windowHeight() {
        return this.$store.state.windowHeight
      },
      /**
       * 荣耀强变亮
       * */
      rongYaoQiangActive() {
        return this.plainState === 20;
      },
      plainState() {
        return 10
        if (!this.finishedDb) {
          return 0
        }
        let s = Math.floor(this.finishedDb / 2 / 5);
        if (s > 20) {
          return 20;
        }
        return s
      },//小红飞机目前状态
    },
    mounted() {
//      setTimeout(()=>{
////        this.plainState=18
//      },1000)
//      setInterval(() => {
//        if (this.plainState >= 20) {
//          this.plainState = 1;
//        } else {
//          this.plainState++;
//        }
//      }, 1000);
      this.ajaxCurrentDbAndFinishedDb();
      //tips层-左
      if (!Storage.get('hasTipsCZ')) {
        layer.tips('点这里充值哦', '.icon-gold-jia', {
          tips: [3, '#78BA32']
        });
      }
      Storage.set('hasTipsCZ', 1);

    },
    methods: {
      hiddenChange(bool) {
        this.footerHidden =bool
      },
      /**
       * 手势滑动
       * */
      divTouchStart(e) {
//        e.preventDefault();
        this.startX = e.changedTouches[0].pageX;
        this.startY = e.changedTouches[0].pageY;
      },
      divTouchMove(e) {
//        e.preventDefault();
        let moveEndX = e.changedTouches[0].pageX,
          moveEndY = e.changedTouches[0].pageY,
          X = moveEndX - this.startX,
          Y = moveEndY - this.startY;

        if (Math.abs(X) > Math.abs(Y) && X > 0) {
//          alert("left 2 right");
        }
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {
//          alert("right 2 left");
        }
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
//          alert("top 2 bottom");
          this.footerHidden = true;
        }
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
//          alert("bottom 2 top");
          this.footerHidden = false;
        }
        else {
//          alert("just touch");
        }
      },


      /**
       * 获取当前人的都币和积分
       */
      ajaxCurrentDbAndFinishedDb() {
        ajaxCore.ajax(config.szg.getCurrentDbAndFinishedDb, null, "get", {
          "Authorization": getToken()
        }).done((res) => {
//          layer.alert(JSON.stringify(res))
          if (res.status == 10001) {
            this.currentDb = res.result.currentDb;
            this.finishedDb = res.result.finishedDb;
          } else {
            layer.msg(res.desc)
          }
        })
      },
      /**
       * 恭喜您获得荣耀墙
       */
      wishGetHonour() {
        if (Storage.get('hasWishGetHonour')) {
          return;
        }
        Storage.set('hasWishGetHonour', true);
        layer.tips('恭喜您获得荣耀', '.szg_plainScorey_rongyao', {
          tips: [3, '#78BA32']
        });
      },
      /**
       * 选择一个飞机后的回调
       */
      chooseOnePlain(index){
        this.currentPlainIndex=index;
        storage.set('currentPlainIndex',index);
      }
    },
    watch: {
      plainState(to) {
        if (to == 20) {
          this.wishGetHonour()
        }
      }
    }
  }
</script>
<template>
  <div class="szg_plainScore" @touchstart="divTouchStart" @touchmove="divTouchMove">
    <!--头部-->
    <plainScoreHead :currentDb="currentDb"></plainScoreHead>
    <!--头部-->
    <!--跑到-->
    <div class="szg_plainScore_centers" :style="{marginTop:windowHeight*(footerHidden?.24:.06)+'px'}">
      <div class="szg_plainScore_paodao">
      </div>
      <div class="szg_plainScorey_yun1"></div>
      <div class="szg_plainScorey_yun2"></div>
      <!--星星-->
      <div class="szg_xingxing animated flash"></div>
      <!--星星-->
      <!--轨道分割-->
      <ul class="fenGeLines">
        <li class="fenGeLine-start"></li>
        <li class="fenGeLine1"></li>
        <li class="fenGeLine2"></li>
        <li class="fenGeLine3"></li>
        <li class="fenGeLine4"></li>
        <li class="fenGeLine5"></li>
        <li class="fenGeLine6"></li>
        <li class="fenGeLine7"></li>
        <li class="fenGeLine8"></li>
        <li class="fenGeLine9"></li>
        <li class="fenGeLine10"></li>
        <li class="fenGeLine11"></li>
        <li class="fenGeLine12"></li>
        <li class="fenGeLine13"></li>
        <li class="fenGeLine14"></li>
        <li class="fenGeLine15"></li>
        <li class="fenGeLine16"></li>
        <li class="fenGeLine17"></li>
        <li class="fenGeLine18"></li>
        <li class="fenGeLine19"></li>
        <li class="fenGeLine-end"></li>
      </ul>
      <ul class="GuiJiLines">
        <li class="guiLine0"></li>
        <li class="guiLine1"></li>
        <li class="guiLine2"></li>
        <li class="guiLine3"></li>
        <li class="guiLine4"></li>
        <li class="guiLine5"></li>
        <li class="guiLine6"></li>
        <li class="guiLine7"></li>
        <li class="guiLine8"></li>
        <li class="guiLine9"></li>
        <li class="guiLine10"></li>
        <li class="guiLine11"></li>
        <li class="guiLine12"></li>
        <li class="guiLine13"></li>
        <li class="guiLine14"></li>
        <li class="guiLine15"></li>
        <li class="guiLine16"></li>
        <li class="guiLine17"></li>
        <li class="guiLine18"></li>
        <li class="guiLine19"></li>
      </ul>
      <!--轨道分割-->
      <img class="szg_plainScorey_redPlain state1" :class=" 'state'+plainState"
           src="../../../../static/staticS/images/chaofei/red-plain.png"/>
      <img class="szg_plainScorey_pingkPlain" :class="'state'+plainState"
           src="../../../../static/staticS/images/chaofei/pink-plain.png"/>
      <!--荣耀强-->
      <img class="szg_plainScorey_rongyao animated " :class="{gray:!rongYaoQiangActive,pulse:!rongYaoQiangActive}"
           src="../../../../static/staticS/images/chaofei/rongyao.png" alt="荣耀">
      <!--荣耀强-->
    </div>
    <!--跑到-->

    <!--选择各种飞机-->
    <MorePlains :footerHidden="footerHidden" @clickCall="chooseOnePlain" :currentPlainIndex="currentPlainIndex"
    :plains="plains"></MorePlains>
    <!--选择各种飞机-->
    <!--扫码-->
    <SaoMa :footerHidden="footerHidden" @hiddenChange="hiddenChange"></SaoMa>
    <GoMyteamBtn :footerHidden="footerHidden"></GoMyteamBtn>
    <GoWhere :footerHidden="footerHidden"></GoWhere>
    <!--扫码-->
  </div>
</template>
<style scoped>
  html, body, #app {
    background-color: #147fc0;
    height: 100%;
  }
</style>
